<template>
  <div class="phone-manage">
    <page-title>课程列表</page-title>
    <div class="content-box">
      <div class="search-box clear-both">
        <!-- <el-input class="input"
                  v-model="searchForm.inputValue"
                  placeholder="请输入内容"></el-input>
        <el-button type="primary">搜 索</el-button> -->
        <el-button type="primary"
                   icon="el-icon-plus"
                   class="float-right"
                   @click="openDialog('add')">添 加</el-button>
      </div>
      <div class="main-table">
        <el-table ref="multipleTable"
                  border
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%">
            <el-table-column prop="title"
                            label="课程名称">
            </el-table-column> 
            <el-table-column prop="section_info.title"
                            label="所属订阅课程">
            </el-table-column> 
            <el-table-column label="课程图片" width="120">
                <template slot-scope="scope">
                    <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.img_url"
                    fit="contain"></el-image>
                </template>
            </el-table-column> 
            <el-table-column label="直播封面" width="120">
                <template slot-scope="scope">
                    <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.live_cover"
                    fit="contain"></el-image>
                </template>
            </el-table-column> 
            <el-table-column prop="desc"
                            label="描述" 
                            width="180">
            </el-table-column> 
            <el-table-column prop="play_num"
                            label="观看人数"
                             width="90">
            </el-table-column> 
            <el-table-column prop="start_time"
                            label="开始时间">
            </el-table-column> 
            <el-table-column prop="end_time"
                            label="结束时间">
            </el-table-column> 
            <el-table-column prop="weight"
                            label="课程权重">
            </el-table-column> 
             
            <el-table-column label="操作"
                            width="160">
                <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.row)"
                            type="text"
                            size="small">
                    删除
                </el-button>
                <el-button @click.native.prevent="openDialog('edit',scope.row)"
                            type="text"
                            size="small">
                    编辑
                </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="text-center"
             style="margin-top:20px;">
          <el-pagination background
                         layout="prev, pager, next"
                         :total="countNum"
                         @current-change="changeListPage">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 课程列表信息 -->
    <el-dialog title="课程列表信息"
               :visible.sync="addTopicDialog"
               width="70%"
               :center="true"
               :close-on-click-modal="false"
               class="dialog-box">
        <div class="upload-content"> 
            <div class="clear-both">
                <div class="float-left"
                style="width:50%">
                    <div class="gourp clear-both">
                        <p class="float-left group-left">课程名称：</p>
                        <div class="float-left group-right">
                            <el-input v-model="uploadForm.title"
                                    placeholder="请输入课程名称"
                                    class="input"></el-input>
                        </div>                          
                    </div>
                    <div class="gourp clear-both">
                        <p class="float-left group-left">直播路径：</p>
                        <div class="float-left group-right">
                            <el-input v-model="uploadForm.play_url"
                                    placeholder="请输入直播路径"
                                    class="input"></el-input>
                        </div>                          
                    </div>
                    <div class="gourp clear-both">
                        <p class="float-left group-left">观看人数：</p>
                        <div class="float-left group-right">
                            <el-input v-model="uploadForm.play_num"
                                    placeholder="请输入观看人数"
                                    type="number"
                                    class="input"></el-input>
                        </div>                          
                    </div>
                    <div class="gourp clear-both">
                        <p class="float-left group-left">课程订阅：</p>
                        <div class="float-left group-right">
                            <el-select v-model="uploadForm.section_id" placeholder="选择课程订阅" class="input">
                                <el-option
                                v-for="item in sectionDataList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>      
                    <div class="gourp clear-both">
                        <p class="float-left group-left">课程描述：</p>
                        <div class="float-left group-right">
                            <el-input v-model="uploadForm.desc"
                                    placeholder="请输入课程描述"
                                    class="input"
                                    :rows="4"
                                    type="textarea"></el-input>
                        </div>
                    </div> 
                    <div class="gourp clear-both" >
                        <p class="float-left group-left">直播开始时间：</p>
                        <div class="float-left group-right"> 
                            <el-date-picker
                                v-model="uploadForm.start_time"
                                type="datetime"
                                class="input"
                                default-time="12:00:00"
                                placeholder="选择直播开始时间">
                                </el-date-picker>
                        </div>
                    </div>
                    <div class="gourp clear-both" >
                        <p class="float-left group-left">直播结束时间：</p>
                        <div class="float-left group-right"> 
                            <el-date-picker
                                v-model="uploadForm.end_time"
                                type="datetime"
                                class="input"
                                default-time="12:00:00"
                                placeholder="选择直播结束时间">
                                </el-date-picker>
                        </div>
                    </div> 
                </div>
                <div class="float-left"
                style="width:50%"> 
                    <div class="gourp clear-both">
                        <p class="float-left group-left">权重：</p>
                        <div class="float-left group-right">
                            <el-input v-model="uploadForm.weight"
                                    placeholder="请输入权重"
                                    type="number"
                                    class="input"></el-input>
                        </div>                          
                    </div>
                    <div class="gourp clear-both">
                        <p class="float-left group-left">课程主图：</p>
                        <div class="float-left group-right">
                            <update-img :imgUrl="uploadForm.live_cover"
                                        @change="((e)=>{bannerPicChange(e,'live')})"
                                        @clearImg="clearBannerPic('live')"></update-img>
                        </div>
                    </div>
                    <div class="gourp clear-both">
                        <p class="float-left group-left">课程详情图：</p>
                        <div class="float-left group-right">
                            <update-img :imgUrl="uploadForm.img_url"
                                        @change="((e)=>{bannerPicChange(e,'detail')})"
                                        @clearImg="clearBannerPic('detail')"></update-img>
                        </div>
                    </div>      
                </div>
            </div>
            <div class="gourp clear-both">
                <div class="group-left">课程详情：</div>
                <editor-txt width="100%"
                            :content="uploadForm.content"
                            @change="changeEditor" />
            </div>
        </div>
        <span slot="footer"
            class="dialog-footer">
            <el-button @click="addTopicDialog = false">取 消</el-button>
            <el-button type="primary"
                   @click="createTopicSub">保 存</el-button>
        </span>
    </el-dialog>
  </div>
</template>
    
<script>
import * as api from "./../../api/api";
import { OSS_RUL_BUCKET } from "./../../config";
export default {
  data () {
    return {
        searchForm: {
            inputValue: '',
            selectValue: '',
        },
        // options: [{
        //   value: '选项1',
        //   label: '01'
        // }],
        openType: 'add',
        pageNum: 1,
        pageSize: 20,
        countNum: 0,
        tableData: [],
        sectionDataList: [], //订阅课程列表
        //上传
        addTopicDialog: false,
        uploadForm: {  
            title:'',  //标题
            section_id:'', //订阅id
            content:'',//富文本
            desc:'', //描述
            img_url:'', //图片
            live_cover:'', //直播封面
            play_url:'', //直播路径
            play_num:'', //观看人数
            start_time:'', //开始时间
            end_time:'', //结束时间
            weight:'', //权重
        }
    };
  },

  computed: {},

  mounted () {
    this.getCoureList();
    this.getGoodsData ();
  },

    methods: {  
        //banner
        bannerPicChange(e,type){
            if(type=='live'){
                this.uploadForm.live_cover = e;
            }else{
                this.uploadForm.img_url = e;
            }
            
        }, 
        //清除banner
        clearBannerPic(val){
            if(val=='live'){
                this.uploadForm.live_cover = '';
            }else{
                this.uploadForm.img_url = '';
            }
            
        },
        changeEditor (html) {
            this.uploadForm.content = html;
        },
        // 获取课程列表
        getCoureList () {
            let vm = this;
            api.fetchSubjectList({page:vm.pageNum}).then(res => {
                if (res.data.code == 200) {
                    let resData = res.data.data;
                    vm.countNum = resData.count;
                    vm.tableData = resData.data ? resData.data : []; 
                }
            });
        },
        changeListPage (e) {
            this.pageNum = e;
            this.getCoureList();
        },
        //打开编辑
        openDialog (val, item) {
            this.openType = val;
            this.addTopicDialog = true;
            if (val == 'add') {
                this.resetData();
            } else {
                this.uploadForm = item;
            }
        },
        resetData () {
            this.uploadForm = {
                title:'',  //标题
                section_id:'', //订阅id
                content:'',//富文本
                desc:'', //描述
                img_url:'', //图片
                live_cover:'', //直播封面
                play_url:'', //直播路径
                play_num:'', //观看人数
                start_time:'', //开始时间
                end_time:'', //结束时间
                weight:'', //权重
            }
        },
        //保存
        createTopicSub () {
            let vm = this;
            if (this.uploadForm.title == '') {
                this.$message('课程名称不能为空');
                return
            } else if (this.uploadForm.play_url == '') {
                this.$message('直播路径不能为空');
                return
            } else if (this.uploadForm.play_num == '') {
                this.$message('观看人数不能为空');
                return
            } else if (this.uploadForm.section_id == '') {
                this.$message('请选择所属课程订阅');
                return
            } else if (this.uploadForm.desc == '') {
                this.$message('描述不能为空');
                return
            } else if (this.uploadForm.start_time == '') {
                this.$message('开始时间不能为空');
                return
            } else if (this.uploadForm.end_time == '') {
                this.$message('结束时间不能为空');
                return
            } else if (this.uploadForm.weight == '') {
                this.$message('权重不能为空');
                return
            } else if (this.uploadForm.live_cover == '') {
                this.$message('课程主图不能为空');
                return
            } else if (this.uploadForm.img_url == '') {
                this.$message('课程详情图不能为空');
                return
            } else if (this.uploadForm.content == '') {
                this.$message('课程详情不能为空');
                return
            }   
            if (vm.openType == 'add') {
                vm.uploadForm.start_time= new Date(vm.uploadForm.start_time).getTime()/1000; //活动开始时间
                vm.uploadForm.end_time= new Date(vm.uploadForm.end_time).getTime()/1000; //活动结束时间
                api.addSubjectItem(vm.uploadForm).then(res => {
                if (res.data.code == 200) {
                    vm.addTopicDialog = false;
                    vm.getCoureList();
                    vm.resetData();//重置数据
                }
                })
            } else {
                let body = {
                    id: vm.uploadForm.id, 
                    data:{
                        title:vm.uploadForm.id,  //标题
                        section_id:vm.uploadForm.section_id, //订阅id
                        content:vm.uploadForm.content,//富文本
                        desc:vm.uploadForm.desc, //描述
                        img_url:vm.uploadForm.img_url, //图片
                        live_cover:vm.uploadForm.live_cover, //直播封面
                        play_url:vm.uploadForm.play_url, //直播路径
                        play_num:vm.uploadForm.play_num, //观看人数
                        start_time:new Date(vm.uploadForm.start_time).getTime()/1000, //开始时间
                        end_time:new Date(vm.uploadForm.end_time).getTime()/1000, //结束时间

                        weight:vm.uploadForm.weight, //权重
                    } 
                    
                }
                api.editSubject(body).then(res => {
                if (res.data.code == 200) {
                    vm.addTopicDialog = false;
                    vm.getCoureList();
                    vm.resetData();//重置数据
                }
                })
            }   
        },
        //删除列表
        deleteRow (item) {
            this.$confirm(`确定删除 ${item.name} ?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.deleteSubject(item.id).then(res => {
                if (res.data.code == 200) {
                    this.getCoureList();
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                }
                });
            })
        },
        //课程订阅列表
        getGoodsData () {
            let vm = this;
            api.fetchSectionList({ page: 1, pageSize: 100 }).then(res => {
                if (res.data.code == 200) {
                    let resData = res.data.data; 
                    vm.sectionDataList = resData.data ? resData.data : []; 
                }
            });  
        },
    }
};
</script>

<style lang="scss" scoped>
.phone-manage {
  .search-box {
    .input {
      width: 200px;
      margin-right: 20px;
    }
  }
  .main-table {
    width: 100%;
    height: 100%;
    padding: 20px 0;
  }
  .dialog-box {
    .upload-content {
      width: 100%;
      height: 100%;
      .gourp {
        margin-bottom: 20px;
        .group-left {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: right;
          margin-right: 15px;
        }
        .group-right {
          .input {
            width: 200px;
          }

          .radio-box {
            height: 40px;
            line-height: 40px;
          }
        }
        .textarea-input {
          width: 70%;
        }
      }
    }
  }
}
</style>
